<template>
  <div class="home">
    <main>
      <!-- 主视觉区域 -->
      <section class="hero">
        <h1>连接家庭与学校，共同促进学生成长</h1>
        <p>便捷的沟通，透明的信息，实时的反馈</p>
        <button @click="navigateHome">立即开始</button>
      </section>

      <!-- 功能介绍 -->
      <section class="features">
        <div class="feature" id="communication">
          <h2>家校沟通</h2>
          <p>轻松沟通，随时交流，共同关注学生发展。</p>
        </div>
        <div class="feature" id="score-query">
          <h2>成绩查询</h2>
          <p>及时了解学生学习情况，关注学生成长。</p>
        </div>
        <div class="feature" id="contact-info">
          <h2>联系信息</h2>
          <p>学校信息一目了然，家长学校无缝对接。</p>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  methods:{
    navigateHome(){
      this.$router.push({name:'communication'})
    }
  }
};
</script>
<style scoped>
/* 主视觉区域 */
.hero {
    background: url('../assets/banner.png') no-repeat center center/cover;
    color: #fff;
    padding: 2rem;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.hero button {
    background: #ff6b6b;
    border: none;
    color: #fff;
    padding: 1rem 2rem;
    font-size: 1rem;
    cursor: pointer;
}

.hero button:hover {
    background: #e63946;
}

/* 功能介绍区域 */
.features {
    display: flex;
    justify-content: space-around;
    padding: 2rem;
    text-align: center;
}

.feature {
    flex-basis: 30%;
}

.feature h2 {
    margin-bottom: 1rem;
    color: #007bff;
}

.home-link{
  text-decoration: none;
}
/* 媒体查询，针对小屏幕调整布局 */
@media screen and (max-width: 768px) {

    .features {
        flex-direction: column;
    }

    .feature {
        margin-bottom: 1rem;
    }
}
</style>
